import React, { useEffect,useState } from 'react'
import { InputItem,Toast } from 'antd-mobile'

import Navbar from '../../components/Navbar'
import { reqUserRegister } from '../../api'

import './index.scss'

export default function Register(props) {
  const {history}=props

  const [submitData, setSubmitData] = useState({
    username:{data:'',isPass:false,err:''},
    password:{data:'',isPass:false,err:''},
    repeatPassword:{data:'',isPass:false,err:''},
    goRegister:false
  })

  const register=()=>{
    const {username,password,repeatPassword}=submitData
    if(username.data===''||password.data===''||repeatPassword.data===''){ //空值监测
      Toast.info('不能为空')
      return
    }
    if(!username.isPass||!password.isPass){ //长度监测
      Toast.show(!username.isPass?username.error:password.error)
      return
    } 
    if(!repeatPassword.isPass){ //监测二次密码是否相同
      Toast.show(repeatPassword.error)
      return
    }
    setSubmitData({...submitData,goRegister:true})
  }

  useEffect(()=>{
    async function register(params){
      let reg_res=await reqUserRegister(params)
      if(reg_res.status!==200){
        Toast.fail(reg_res.description)
        setSubmitData({...submitData,goRegister:false})
        return
      }
      Toast.success(reg_res.description)
      setSubmitData({...submitData,goRegister:false})
      //页面跳转，替换路由到登录页面
      history.replace('/login')
    }
    if(submitData.goRegister)register({username:submitData.username.data,password:submitData.password.data})
  },[submitData,history])

  return (
    <div>
      <div className='register-navbar'>
        <Navbar title='注册'></Navbar>
      </div>
      <div className='register-content'>
        <InputItem
            clear
            name='username'
            placeholder="请输入账号"
            onChange={val=>setSubmitData({...submitData,username:{data:val,isPass:val.length>=4&&val.length<=20,error:'必须由4-20个有效字符组成'}})}
            error={!submitData.username.isPass}
            onErrorClick={()=>Toast.show(submitData.username.error)}
          >账号:</InputItem>
        <InputItem
          clear
          type='password'
          name='password'
          placeholder="请输入密码"
          onChange={val=>setSubmitData({...submitData,password:{data:val,isPass:val.length>=5&&val.length<=20,error:'必须由5-20个有效字符组成'}})}
          error={!submitData.password.isPass}
          onErrorClick={()=>Toast.show(submitData.password.error)}
        >密码:</InputItem>
        <InputItem
          clear
          type='password'
          placeholder="请重新输入密码"
          onChange={val=>setSubmitData({...submitData,repeatPassword:{data:val,isPass:submitData.password.data===val,error:'两次密码不相等'}})}
          error={!submitData.repeatPassword.isPass}
          onErrorClick={()=>Toast.show(submitData.repeatPassword.error)}
        >重复密码:</InputItem>
      </div>
      <div className='register-btn'>
        <div className='btn' onClick={()=>register()}>注册</div>
      </div>
      <div className='register-footer'>
        <span onClick={()=>history.replace('/home')}>点我回首页</span>
        <span onClick={()=>history.replace('/login')}>已有账号，去登录</span>
      </div>
    </div>
  )
}
